<script>
import * as echarts from 'echarts'
export default {
  name: "EchartsExamplePage",
  data(){
    return{
      categoryData:[
        "华为手机","小米手机","苹果手机","oppo手机","联想手机"
      ],
      seriesData:[
        {
          name:"2022年销量",
          type:'bar',
          data:[8888,7777,6666,5555]
        },
        {
          name:'2023年销量',
          type: 'bar',
          data:[60204,8232,9523,9541]
        }

      ]
    }

  },
  methods:{
    refreshDataToEcharts(){
      const myChart = echarts.init(document.getElementById('my-chart'),'dark')
      const option = {
        xAxis:{
          type :'category',
          data:this.categoryData
        },
        yAxis:{
          type : 'series',
          data:this.seriesData
        }
      }
      myChart.setOption(option)

    },
    handleTabclick(tab){
      if(tab.name == "echartsView"){
        this.refreshDataToEcharts()
      }

    }

  }


}
</script>

<template>
  <div>
    <el-card style="width: 1000px;margin: 20px auto" >
      <div>
        <span>数据统计</span>
      </div>

      <div>
        <el-tabs @tab-click="handleTabclick">
          <el-tab-pane label="表格视图" name="tableView">
            假设这里有一个表格
          </el-tab-pane>
          <el-tab-pane label="可视化视图" name="echartsView">
            <div id="my-chart" style="width: 100% ; height: 600px"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>





  </div>
</template>

<style scoped>

</style>